<script>
import Vue from 'vue'
import newTab from '@/assets/js/newTab.js'
import CardList from './cardList.vue'
import { addDB, initDB, searchDB } from '@/option'
Vue.mixin(newTab)
export default {
  data () {
    return {
      // 顶部打字效果内容
      txt: [],
      // 字体下标
      fontIndex: 0,
      // 下标
      subscript: 0,
      // 改变内容标志
      changeFlag: true,
      // 搜索的内容
      searchText: ''
    }
  },
  // 组件注册
  components: {
    CardList
  },
  created () {
    // 初始化数据库
    initDB('catalogue')
  },
  mounted () {
    // 文字输入与输出
    setInterval(() => {
      if (this.txt.length > 0) {
        this.typeWriter()
      } else {
        const data = { name: '北极光' }
        addDB(data, 'WT')
        // 查表-初始化顶部数据
        searchDB('WT').then(async res => {
          this.txt = await res.map(item => item.name)
        })
      }
    }, 200)
  },
  methods: {
    // 顶部打字效果
    typeWriter () {
      let elementtype = this.$refs.typeWriters
      if (this.changeFlag) {
        elementtype.innerHTML = this.txt[this.subscript].slice(
          0,
          ++this.fontIndex
        )
      } else {
        elementtype.innerHTML = this.txt[this.subscript].slice(
          0,
          this.fontIndex--
        )
      }
      if (this.fontIndex === this.txt[this.subscript].length + 3) {
        this.changeFlag = false
      } else if (this.fontIndex < 0) {
        this.fontIndex = 0
        this.changeFlag = true
        this.subscript++
        if (this.subscript >= this.txt.length) {
          this.subscript = 0
        }
      }
    },
    // 搜索框-- 搜索引擎--必应
    searchBing () {
      if (!this.searchText) {
        this.$message.error('不能进行空搜索!')
      } else {
        const searchUrl =
          'https://www.bing.com/search?q=' + encodeURIComponent(this.searchText)
        // 跳转到这个URL
        window.location.href = searchUrl
        this.searchText = ''
      }
    }
  }
}
</script>

<template>
  <div class="center">
    <h1>
      <span class="text" ref="typeWriters"></span>
    </h1>
    <main>
      <div class="searchArea">
        <!-- 搜索框 -->
        <input
          class="inputText"
          type="text"
          placeholder="请输入搜索内容"
          v-model="searchText"
          @keydown.enter="searchBing"
        />
        <button class="button" @click="searchBing">搜索</button>
      </div>
    </main>
    <CardList></CardList>
  </div>
</template>

<style lang="less" scoped>
@import url('../reset.css');

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 48px;
  color: #ccc;

  h1 {
    position: absolute;
    top: 40px;
  }
}

.text {
  font-family: 'MiaoZi-YunYingTi-2';
  display: inline-block;
  position: relative;
  font-size: 40px;
  height: 60px;
  line-height: 60px;
  color: #f5b7cb;
}

.text::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 5px;
  height: 50px;
  width: 3px;
  background-color: #f8cede;
  animation: typeWriter 0.6s steps(1) infinite;
}

/* 打字机特效 */
@keyframes typeWriter {
  0%,
  100% {
    background-color: #f8cede;
  }

  50% {
    background-color: transparent;
  }
}

@font-face {
  font-family: 'MiaoZi-YunYingTi-2';
  /*声明一个名为MiaoZi-YunYingTi-2的字体变量*/
  src: url('../../assets/fonts/MiaoZi-YunYingTi-2.ttf');
}

@font-face {
  font-family: 'ZiHunXianJianQiXiaTi';
  src: url('../../assets/fonts/ZiHunXianJianQiXiaTi.ttf');
}

main {
  position: absolute;
  width: 800px;
  justify-content: center;
  display: flex;
  top: 200px;

  input {
    height: 50px;
    width: 650px;
  }

  .searchArea {
    position: absolute;
    top: 0px;

    .inputText {
      padding-left: 20px;
      letter-spacing: 3px;
      color: #fff;
      border-radius: 20px 0 0 20px;
      outline: none;
      float: left;
      cursor: url('../../assets/img/text.cur'), auto;
      font-size: 18px;
      font-family: 'ZiHunXianJianQiXiaTi';
      backdrop-filter: blur(14px) saturate(180%);
      -webkit-backdrop-filter: blur(14px) saturate(180%);
      background-color: rgba(253, 211, 211, 0.4);
      border: 1px solid rgba(209, 213, 219, 0.3);
    }

    .button {
      float: left;
      border: none;
      height: 50px;
      background-color: red;
      color: white;
      font-weight: 800;
      border-radius: 0 15px 15px 0;
      padding: 5px 10px;
      letter-spacing: 5px;
      width: 80px;

      &:hover {
        cursor: url('../../assets/img/link.cur'), pointer;
      }
    }
  }
}
</style>
